<template>
	<view class="transaction">
		<navCom :navName="txt" @previous="previous"></navCom>
		<view class="ld-record-tabs">
			<view :class="changeTab=='DAY'?'active':''" class="transfer" @click="changetabs('DAY')">日维度</view>
			<view :class="changeTab=='MONTH'?'active':''" class="reception" @click="changetabs('MONTH')">月维度</view>
		</view>
		<view class="day_tab_box">
			<view class="tab_box_item" v-if="changeTab=='DAY'">
				<view class="tab_box_item_li" v-for="(i,d) in dataArr" :key="d">
					<view class="tab_box_num" @click="changebor(d,i,'none')">{{i}}</view>
					<view class="tab_box_item_bor" :class="bortab===d?'tabactive':''"></view>
				</view>
			</view>
			<view class="tab_box_item" v-else>
				<view class="tab_box_item_li" v-for="(item,index) in 5" :key="item">
					<view class="tab_box_num" @click="changebor(index,(month-index),year)">{{year}}-{{month>9?'':'0'}}{{month-index}}</view>
					<view class="tab_box_item_bor" :class="bortab===index?'tabactive':''"></view>
				</view>
			</view>
			<view class="contant my-mgl-15">
				<view class="bor_fir">
					<view class="">
						{{changeTab==='DAY'?'今日':'当月'}}团队{{currTab==='交易额'?'交易量':''||currTab==='交易笔数'?'交易笔数':''||currTab==='机具激活'?'机具激活':''}}
					</view>
					<view class="" v-if="currTab==='交易额'">
						{{dev[0].teamAmount|| 0}}元
					</view>
					<view class="" v-else-if="currTab==='交易笔数'">
						{{dev[0].teamCount || 0}}元
					</view>
					<view class="" v-else>
						{{dev[0].teamCount || 0}}元
					</view>
				</view>
				<view class="bor_fir">
					<view class="">
						{{changeTab==='DAY'?'今日':'当月'}}我的{{currTab==='交易额'?'交易量':''||currTab==='交易笔数'?'交易笔数':''||currTab==='机具激活'?'机具激活':''}}
					</view>
					<view class="" v-if="currTab==='交易额'">
						{{dev[0].myAmount|| 0 }}元
					</view>
					<view class="" v-else-if="currTab==='交易笔数'">
						{{dev[0].myCount|| 0}}元
					</view>
					<view class="" v-else>
						{{dev[0].myCount || 0}}元
					</view>
				</view>
				<view class="bor_fir" v-if="currTab !=='机具激活'">
					<view class="">
						{{changeTab==='DAY'?'今日':'当月'}}直营{{currTab==='交易额'?'交易量':''||currTab==='交易笔数'?'交易笔数':''||currTab==='机具激活'?'机具激活':''}}
					</view>
					<view class="" v-if="currTab==='交易额'">
						{{dev[0].nextAmount|| 0}}元
					</view>
					<view class="" v-else-if="currTab==='交易笔数'">
						{{dev[0].nextAmount|| 0}}元
					</view>
				</view>
			</view>
			<view class="moll_btn">
				<view class="" @click="godetail">查看更多</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navCom from "@/components/navCom/navCom.vue";
	import { perdataApi } from "@/api/results.js"
	export default {
		components: {
			navCom,
		},
		data() {
			return {
				txt: '',
				changeTab: 'DAY',
				currTab:'',
				ids:1,//公司id
				day:null,
				month:null,
				year:null,
				bortab:0,//时间按钮
				dev:[],
				changeTime:0,
				dataArr:[],
			};
		},
		onLoad(option) {
			this.currTab = option.currTab;
			this.txt = option.currTab + '(' + option.companyName + ')';
			this.ids = option.ids
			this.dsdd(5);
			this.getData()
		},
		methods: {
			changetabs(item) {
				this.changeTab = item
				this.dev=[]
				this.isDayorMonth()
				this.getData()
			},
			previous(){
				uni.switchTab({
					url:"/pages/main/homePages"
				})
			},
			// 天数切换
			changebor(i,time,year){
				this.bortab = i
				if(year==='none'){
					this.changeTime = time
				}else{
					console.log(time,year,99999);
					this.changeTime = year+'-'+ (time > 9 ? time: '0'+time)
				}
				this.dev=[]
				this.getData()
			},
			getDay(i){
				var today = new Date();
				var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * i;
				today.setTime(targetday_milliseconds);
				var month = today.getMonth();
				var day = today.getDate();
				month = this.doHandleMonth(month + 1);
				day = this.doHandleMonth(day);
				return month + "-" + day;
			},
			doHandleMonth(month) {
			    var m = month;
			    if (month.toString().length == 1) {
			      m = "0" + month;
			    }
			    return m;
			},
			dsdd(e) {  //拼接
			    this.dataArr.splice(0);//请控之前的数据
			    for (let i = 0; i < e; i++) {
			      this.dataArr.push(this.getDay(-i));//-i 代表之前  i代表将来
			    }
				this.month = new Date().getMonth()+1
				if(this.month < 1){
					this.month = 12
				}
				this.isDayorMonth()
			},
			isDayorMonth(){
				let date = new Date();
				let y = date.getFullYear()
				let d = date.getDate() > 9?date.getDate(): '0' + date.getDate()
				let m = date.getMonth() + 1 > 9? date.getMonth() + 1 : '0' + (date.getMonth() + 1-0)
				this.year = y
				if(this.changeTab==='DAY'){
					this.changeTime = m +'-'+ d
				}else{
					this.changeTime = y +'-'+ m
				}
			},
			// 查看更多
			godetail(){
				let type = this.currTab
				let comid = this.ids
				let timer = this.changeTab
				uni.navigateTo({
					url:`/pages/performance/orderDetails?currTab=${type}&ids=${comid}&acoun=${timer}`
				})
			},
			// 获取数据
			async getData(){
				let params = {
					companyId: this.ids,
					interval:5,
					timeType:this.changeTab
				}
				uni.showLoading({
					title: "正在加载中...."
				})
				var url =''
				if (this.currTab === '交易额') {
					url = "/user/achieve/transfer/data/list"
				} else if (this.currTab === '交易笔数') {
					url = "/user/achieve/transfer/number/data/list"
				} else if (this.currTab === '机具激活') {
					url = "/user/achieve/activation/number/data/list"
				}
				const res = await perdataApi(url,params)
				if(res.statusCode ===200 ){
					uni.hideLoading()
					if(this.changeTab==='DAY'){
						this.dev = res.data.data.filter((item,index)=>item.timeValue.slice(5,item.timeValue.length)===this.changeTime + '')
					}else{
						console.log(this.changeTime,98989);
						this.dev = res.data.data.filter((item,index)=>item.timeValue===this.changeTime + '')
						console.log(this.dev,"this.dev");
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.transaction {
		width: 100%;

		.ld-record-tabs {
			width: 100%;
			height: 150rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background: #FAFAFA;

			.transfer,
			.reception {
				width: 200rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			.reception,
			.transfer {
				background: #FAFAFA;
				border: 1rpx solid #f4f4f4;
				font-size: 30rpx;
				font-weight: 500;
				color: #999999;
			}

			.transfer {
				border-radius: 35rpx 0rpx 0rpx 35rpx;
			}

			.reception {
				border-radius: 0rpx 35rpx 35rpx 0rpx;
			}

			.active {
				background: #FFFFFF;
				font-weight: bold;
				color: #000000;
			}
		}

		.day_tab_box {
			width: 100%;
			height: 1035rpx;
			background: #FFFFFF;

			.tab_box_item {
				width: 100%;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-evenly;
				border-bottom: 1rpx solid #E8E8E8;
				.tab_box_item_li{
					width: 20%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					.tab_box_num{
						width: 100%;
						height: 90%;
						line-height: 90rpx;
						text-align: center;
					}
					.active_num{
						color: #F05329;
					}
					.tab_box_item_bor{
						width: 40rpx;
						height: 10%;
						line-height: 100rpx;
					}
					.tabactive{
						border-bottom: 2rpx solid #F05329;
					}
				}
			}
			.contant{
				width: 92%;
				height: 300rpx;
				.bor_fir{
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid #F2F2F2;
					font-size: 26rpx;
					font-weight: 400;
				}
			}
			.moll_btn{
				width: 100%;
				height:250rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 30rpx;
				font-weight: 500;
				color: #F05329;
			}
		}
	}
</style>
